<template>
   <div class="box">
      <div class="top">
         <div class="top1">2023年第一学期·第六周</div>
         <van-row>
            <van-col span="3">
               <span></span>
               <span>{{ ((new Date()).getMonth() + 1) + '月' }}</span>
            </van-col>
            <van-col span="3" v-for="(item, index) in date" @click="handlerclickevent(index)" ref="vancolRef">
               <span>{{ item.week1 }}</span>
               <span>{{ item.day }}</span>
            </van-col>
         </van-row>
      </div>
      <div class="bottom">
         <van-row v-for="(ite, index1) in adminall">
            <van-col span="3">
               <span>{{ index1 + 1 }}</span>
            </van-col>
            <van-col span="3" v-for="(item, index) in date" @click="showdialog">
               <span ref="span1Ref" :data-index="index">{{ (Object.keys(ite)).includes(String(index + 1)) ? (index !== 0)
                  && (index !== 6) ? ite[index +
                     1].subject : '' : ''
               }}</span>
               <span ref="span2Ref" :data-index="index">{{ (Object.keys(ite)).includes(String(index + 1)) ? (index !== 0)
                  &&
                  (index !== 6) ? ite[index +
                     1].classroom : '' : ''
               }}</span>
            </van-col>
         </van-row>
      </div>
      <van-overlay :show="show" @click="show = false">
         <div class="wrapper" @click.stop>
            <div class="block">
               <p>课程详情</p>
               <p ref="ptopRef">高三年级语文</p>
               <p ref="pbottomRef">教室A304</p>
               <p>开始-结束:45分钟,请提前去厕所</p>
               <van-icon name="clear" size="30px" color="white" @click="closedailog" />
            </div>
         </div>
      </van-overlay>
   </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { allApi } from '@/api/adminAPi'
import { randomColor } from '@/utils/tools'
let adminall = ref([])
onMounted(async () => {
   let ret = await allApi()
   if (ret.code === 0) {
      adminall.value = ret.data
   }
   setTimeout(() => {
      span1Ref.value.forEach(item => {
         item.style.color = randomColor()
      })
      span2Ref.value.forEach(item => {
         item.style.color = randomColor()
      })
   }, 10)
   vancolRef.value.forEach((item, index) => {
      if (index === indexre) {
         item.$el.click()
      }
   })
})
const span1Ref = ref()
const span2Ref = ref()
const vancolRef = ref()
const show = ref(false)
const ptopRef = ref()
const pbottomRef = ref()
var date = ref(Array(7).fill(undefined))
const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
date.value[((new Date()).getDay()) - 1] = { week1: week[((new Date()).getDay()) - 1], day: (new Date()).getDate() }
const regular = date.value[((new Date()).getDay()) - 1]
const indexre = ((new Date()).getDay()) == 0 ? ((new Date()).getDay()) : ((new Date()).getDay()) - 1
const dayre = (new Date()).getDate()
date.value = date.value.map((item, index) => {
   if (!item) {
      return {
         week1: week[index],
         day: (dayre - (indexre - index)) > 30 ? (dayre - (indexre - index)) - 30 : dayre - (indexre - index)
      }
   } else {
      return item
   }
})
const handlerclickevent = (indexx) => {
   vancolRef.value.forEach((item) => {
      item.$el.classList.remove('van-top1')
      item.$el.classList.add('van-top2')
   })
   vancolRef.value.forEach((item, index) => {
      if (index === indexx) {
         item.$el.classList.remove(...item.$el.classList)
         item.$el.classList.add('van-top1')
      }
   })
   setTimeout(() => {
      span1Ref.value.forEach(item => {
         item.style.color = randomColor()
         item.style.backgroundColor = 'white'
         item.classList.remove(...item.classList)
      })
      span2Ref.value.forEach(item => {
         item.style.color = randomColor()
         item.style.backgroundColor = 'white'
         item.classList.remove(...item.classList)
      })
      span1Ref.value.forEach(item => {
         if ((Number(item.dataset.index) === indexx) && item.innerText) {
            item.style.color = 'rgb(239, 242, 245)'
            item.style.backgroundColor = randomColor()
            item.classList.add('van-span2')
         }
      })
      span2Ref.value.forEach(item => {
         if ((Number(item.dataset.index) === indexx) && item.innerText) {
            item.style.color = 'rgb(239, 242, 245)'
            item.style.backgroundColor = randomColor()
            item.classList.add('van-span2')
         }
      })
   }, 10)
}
const showdialog = (event) => {
   show.value = true 
}
const closedailog = () => {
   show.value = false
}
</script>
<style lang='scss' scoped>
.wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
}

.block {
   width: 200px;
   height: 200px;
   background-color: #fff;
   background-image: url('@/img/bk.png');
   background-size: cover;
   position: relative;

   p {
      &:nth-child(1) {
         font-size: 20px;
         font-weight: 900;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      &:nth-child(2) {
         font-size: 20px;
         color: #6CB6FF;
         font-weight: 900;
      }
      &:nth-child(3) {
         font-size: 17px;
         color: #6cff76;
         font-weight: 900;
      }
      &:nth-child(4) {
         font-size: 17px;
         color: rgb(255, 179, 108);
         font-weight: 900;
      }
   }

   .van-icon {
      position: relative;
      top: 50%;
      left: 43%;
   }
}

.van-top1 {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   height: 50px;
   width: 12.5%;
   border-bottom: 3px solid black;

   span {
      color: black;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
   }

}

.van-top2 {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   height: 50px;
   width: 12.5%;
   border-bottom: 1px solid #B5BCC6;

   span {
      color: #B5BCC6;
      font-size: 13px;
      font-weight: 400;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
   }
}

.van-span2 {
   font-size: 15px;
   background-color: skyblue;
   padding: 5px;
   border-radius: 5px;
   display: flex;
   justify-content: center;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
   pointer-events: none;
}

.box {
   height: 90%;
   padding-bottom: 50px;

   .top {
      position: sticky;
      top: 28px;
      background-color: white;

      .top1 {
         height: 30px;
         font-size: 18px;
         font-weight: 700;
         margin: 20px 0;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .van-row {
         .van-col {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 50px;
            border-bottom: 1px solid #B5BCC6;

            span {
               color: #B5BCC6;
               font-size: 13px;
               font-weight: 400;
               display: flex;
               justify-content: center;
               align-items: center;
               pointer-events: none;
            }

            &:nth-child(1) {
               pointer-events: none;
               display: flex;
               justify-content: center;
               align-items: center;
            }
         }
      }
   }

   .bottom {

      .van-row {
         .van-col {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 90px;
            padding: 10px 0;

            span {
               color: #B5BCC6;
               font-size: 13px;
               pointer-events: none;
            }

            &:nth-child(1) {
               pointer-events: none;
               display: flex;
               justify-content: center;
               align-items: center;
            }
         }
      }
   }
}</style> 